iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 5
0
Modern Web

每日挖個坑,用坑填起耍廢聊天室!系列 第 5

五號坑,造個路vue-router送你到各地

  • 分享至 

  • xImage
  •  

先來造個路吧!使用vue-router設定從網址下不一樣的內容走到對應的頁面。

我們先在pages資料夾內新增一個檔案夾叫做chat,並增加一支index.vue
path
裡面先塞一段

<template>
  <div>
    chat
  </div>
</template>

關於template的小知識在下一篇寫,讓我湊湊篇數XD

資料夾最外層新增一支router.js,裡面新增以下

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

export function createRouter() {
  return new Router({
    mode: 'history',
    routes: [
      {
        path: '/chat', // 設定其他頁面,網址後面後的query
        name: 'chatting_room', // name可有可無,但在router切換頗方便
        component: require('~/pages/chat').default // 指定這個router要引用哪個page
      },
      // {...看還要加啥}
    ]
  })
}

然後在 localhost:3000/chat 上看到結果嚕~
router


上一篇
四號坑,在Nuxt資料夾內翻滾
下一篇
六號坑,templete和.vue拆分檔案小知識
系列文
每日挖個坑,用坑填起耍廢聊天室!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言